<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<style type="text/css">
    .layui-table-fixed-r td{height:58px!important;}
.layui-table-fixed-r th{height:58px!important;}
.layui-table img {
    max-width: 48px;min-height: 48px;
}


.laytable-cell-3-headimg ,
.laytable-cell-1-headimg,
.laytable-cell-2-headimg,
.laytable-cell-3-headimg,
.laytable-cell-4-headimg,
.laytable-cell-5-headimg,
.laytable-cell-6-headimg,
.laytable-cell-7-headimg,
.laytable-cell-8-headimg,
.laytable-cell-9-headimg,
.laytable-cell-10-headimg,.laytable-cell-11-headimg,.laytable-cell-12-headimg,.laytable-cell-13-headimg,.laytable-cell-14-headimg{
    width: 48px!important;;padding:2px!important;height: 48px!important;;
    line-height: 48px!important;;
}

</style>

<body>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">自动回复管理</li>
        <li>地区管理</li>
        <li>消息管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add" id="btn-add">添加</button>
            </div>
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <div class="layui-tab-item">
            嘻嘻嘻
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="msgTable" lay-filter="test"></table>
        </div>
    </div>

</div>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<!-- 信息回复代码块 -->
<script type="text/javascript" th:src="@{/js/table.js}"></script>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 获取服务器地址 -->
<input type="hidden" th:value="${serverLocation}" id="name"/>
<script th:inline="none">
    var serverLocation = $('#name').val();

    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/list/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,response:{
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 200 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
            ,cols: [
                [
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'keyword', width:200, title: '关键词',edit:'text'}
                ,{field:'reply', width:200, title: '回复', sort: true,edit:'text'}
                ,{field:'type', width:200, title: '回复类型'}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}

                ]
            ]
        });
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url:serverLocation+"/delete"+"?id="+data.id,
                        type:"get",
                        success:function (resp) {
                            alert("删除成功");
                        }

                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                // $.post("{:U('update)}",data,function(){
                //         layer.msg("1111111");
                // },'json');
                $.ajax({
                    type:"post",
                    url:serverLocation +'/update/',
                    datType: "json",
                    data:JSON.stringify(data),
                    contentType: "application/json",
                    success:function (resp) {
                        alert("更新成功");
                    }

                })

            }
        });

        $('#btn-add').on('click',function () {
            layer.open({
                type: 2,
                title: '采集设备添加',
                maxmin: true,
                area: ['420px', '330px'],
                shadeClose: false, //点击遮罩关闭
                content: 'form'

            })
        })

    });
</script>


</body>
</html>